<template>
  <div>
    <div class="advertisement-info">
      <div class="content">
        <div class="project-info">
          <div class="advertisement-form mt50">
            <el-form
              style="max-width: 1200px"
              :model="state.form"
              :rules="state.rules"
              ref="formRef"
              label-position="top"
            >
              <el-form-item label="广告名称" prop="bannermingcheng">
                <el-col :span="10">
                  <el-input
                    disabled
                    size="large"
                    v-model="state.form.bannermingcheng"
                  />
                </el-col>
              </el-form-item>
              <el-form-item label="位置" prop="weizhi">
                <el-select
                  v-model="state.form.weizhi"
                  size="large"
                  placeholder="选择广告位置"
                  disabled
                  style="width: 260px"
                >
                  <el-option
                    v-for="item in state.position"
                    :key="item.dicValue"
                    :label="item.dicLabel"
                    :value="item.dicValue"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="广告介绍" prop="guanggaojieshao">
                <el-input
                  type="textarea"
                  rows="5"
                  size="large"
                  v-model="state.form.guanggaojieshao"
                />
              </el-form-item>
              <div
                v-for="(item, index) in state.form.neirong"
                :key="index"
                class="advertisement-service-box"
              >
                <el-form-item
                  class="mt50"
                  :label="
                    '广告图' +
                    (index + 1) +
                    `${
                      index === 0
                        ? '(建议尺寸:358*316px)'
                        : '(建议尺寸:358*156px)'
                    }`
                  "
                  prop="tupian"
                >
                  <bjz-oss
                    :previewList="item.tupian"
                    :nowIndex="index"
                    :accept="['.jpg', '.png', '.jpeg']"
                    @success="successImg"
                    @remove="removeImg"
                  />
                </el-form-item>
                <el-form-item label="类型" prop="leixing">
                  <el-select
                    v-model="item.leixing"
                    size="large"
                    placeholder="选择类型"
                    style="width: 260px"
                    @change="select(index)"
                  >
                    <el-option
                      v-for="item in state.type"
                      :key="item.dicValue"
                      :label="item.dicLabel"
                      :value="item.dicValue"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item
                  v-if="item.leixing == 'guanggaoneirongleixing_fuwenben'"
                  prop="guanggaoneirong"
                  label="富文本"
                >
                  <editor
                    :initValue="item.guanggaoneirong"
                    :index="index"
                    @onVal="onVal"
                  />
                </el-form-item>
                <el-form-item
                  v-if="item.leixing == 'guanggaoneirongleixing_lianjie'"
                  prop="guanggaoneirong"
                  label="跳转链接"
                >
                  <el-col :span="10">
                    <el-input size="large" v-model="item.guanggaoneirong" />
                  </el-col>
                </el-form-item>
              </div>
              <el-form-item class="status" label="状态：">
                <el-radio-group v-model="state.form.shangjia">
                  <el-radio :label="1">上架</el-radio>
                  <el-radio :label="0">下架</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item class="button-group">
                <el-button
                  style="margin-left: 100px"
                  type="primary"
                  @click="submitForm(formRef)"
                  >提交</el-button
                >
                <el-button
                  type="primary"
                  style="margin-left: 50px"
                  @click="$router.go(-1)"
                  >取消</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { GetAdvertisement, EditAdvertisement } from "@/api/advertisement";
import { GetDictionaryTree } from "@/api/system";
import { baseMsg } from "@/utils/utils";
const route = useRoute();
const router = useRouter();
const formRef = ref(null);
const validateImg = (rule, value, callback) => {
  if (state.form.neirong && state.form.neirong.length) {
    if (state.form.neirong[0].tupian && state.form.neirong[0].tupian.length) {
      callback();
    } else {
      callback(new Error("请上传图片"));
    }
  } else {
    callback(new Error("请上传图片"));
  }
};
const validateType = (rule, value, callback) => {
  if (state.form.neirong && state.form.neirong.length) {
    if (state.form.neirong[0].leixing) {
      callback();
    } else {
      callback(new Error("请选择类型"));
    }
  } else {
    callback(new Error("请选择类型"));
  }
};
const validateContent = (rule, value, callback) => {
  if (state.form.neirong && state.form.neirong.length) {
    if (state.form.neirong[0].guanggaoneirong) {
      callback();
    } else {
      callback(new Error("请输入内容"));
    }
  } else {
    callback(new Error("请输入内容"));
  }
};
const state = reactive({
  form: {},
  type: [],
  position: [],
  rules: {
    bannermingcheng: [
      { required: true, message: "请输入广告名称", trigger: "blur" },
    ],
    weizhi: [
      {
        required: true,
        message: "请选择广告位置",
        trigger: "change",
      },
    ],
    tupian: [
      {
        required: true,
        trigger: "change",
        validator: validateImg,
      },
    ],
    leixing: [
      {
        required: true,
        trigger: "change",
        validator: validateType,
      },
    ],
    guanggaoneirong: [
      {
        required: true,
        trigger: "change",
        validator: validateContent,
      },
    ],
    guanggaojieshao: [
      { required: true, message: "请输入广告介绍", trigger: "blur" },
    ],
  },
});
// 查询广告
const GetAd = (params) => {
  GetAdvertisement(params).then((res) => {
    if (res.code === 4201) {
      state.form = res.data;
    }
  });
};
// 查询广告类型下拉
const getAdType = () => {
  GetDictionaryTree({ dicModel: "guanggaoneirongleixing" }).then((res) => {
    if (res.code == 4201) {
      state.type = res.data;
      getAdPosition();
      GetAd({ id: route.query.id });
    }
  });
};
// 查询广告位置下拉
const getAdPosition = () => {
  GetDictionaryTree({ dicModel: "guanggaoweizhi" }).then((res) => {
    if (res.code == 4201) {
      state.position = res.data;
    }
  });
};
//
const html2text = (html) => {
  html = html.replace(/(\n)/g, "");
  html = html.replace(/(\t)/g, "");
  html = html.replace(/(\r)/g, "");
  html = html.replace(/<\/?[^>]*>/g, "");
  html = html.replace(/(\s)/g, "");
  return html;
};
const select = (index) => {
  state.form.neirong[index].guanggaoneirong = html2text(
    state.form.neirong[index].guanggaoneirong
  );
};
// 图片上传成功
const successImg = (res, index) => {
  state.form.neirong[index].tupian.push(res);
};
// 上传文件删除
const removeImg = (index, nowIndex) => {
  state.form.neirong[nowIndex].tupian.splice(index, 1);
};
// 富文本编辑器
const onVal = (val, index) => {
  state.form.neirong[index].guanggaoneirong = val;
};
// 提交表单
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      EditAdvertisement(state.form).then((res) => {
        if (res.code == 4202) {
          baseMsg("编辑广告成功");
          router.go(-1);
        }
      });
    }
  });
};
getAdType();
</script>
<style lang="scss" scoped>
.content {
  border: none !important;
}
.project-info {
  padding: 30px 100px;
  font-size: 20px;
  color: black;
  display: flex;
  .advertisement-form {
    width: 1200px;
  }
}
.el-form-item {
  display: flex;
  flex-direction: column;
  &.vue-editor {
    align-items: baseline;
  }
  &.status {
    flex-direction: row;
  }
}
</style>
<style lang="scss">
.advertisement-form {
  textarea {
    &[name="editorValue"] {
      display: none;
    }
  }
}
</style>
